<template>
	<view class="page detail bgf5">
		<view class="head px20 py40">
			<view class="fs18 white" v-if="order.status == 'payed'">待接单</view>
			<view class="fs18 white" v-else-if="order.status == 'taked'">已接待</view>
			<view class="fs18 white" v-else-if="order.status == 'doing'">消费中</view>
			<view class="fs18 white" v-else-if="order.status == 'done'">已完成</view>
			<view class="fs18 white" v-else-if="order.status == 'refund'">已退款</view>
			<view class="fs18 white" v-else-if="order.status == 'cancel'">已取消</view>

		</view>
		<view @click="onOpenPopup" class="bgff pl18 pr10 r8 shadow flex flexC mx12 mt-20">
			<image class="location" src="/static/img/icon/shouhuo.png" mode="widthFix"></image>
			<view class="mr10 flex1 py12 ml20">
				<view class="fs16"><text class="mr12">{{order.shop.name}}</text></view>
				<view class="mt6 fs12">
					{{order.shop.address}}
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="bgff p12 mt10">
			<view class="flex flexS py10">
				<image class="logo bgf5 r6" :src="order.assistant.logo" mode="aspectFill"></image>
				<view class="flex1 mx10">
					<view class="ellipsis2 fs12">{{order.assistant.name}}</view>
					<view class="mt8 fs12 c8e"></view>
				</view>
				<view class="aliR">
					<view class="">￥{{order.assistant.price}}/小时</view>
					<view class="mb40">×{{order.hour}}小时</view>
				</view>
			</view>
			<view class="py16 flex flexB flexC">
				<text>总金额</text><text class="cbd ml12">￥{{order.amount}}</text>
			</view>
			<view class="pb16 flex flexB flexC">
				<text>车费</text><text class="cbd ml12">￥{{order.tip}}</text>
			</view>
			<view class="p8 bgf5 r4 flex flexB flexC">
				<text>实付</text><text class="cf2 ml12">￥{{order.pay_amount}}</text>
			</view>
		</view>
		<view class="bgff p12 mt10 mb48 c59 fs12">
			<view class="flex flexC">
				<text class="w-4">订单编号:</text>
				<text class="flex1">{{order.order_no}}</text>
				<text @click="copyOrder" class="bgd0 r40 px10 py2 c00">复制</text>
			</view>
			<view class="flex flexC mt14">
				<text class="w-4">创建时间:</text>
				<text class="flex1">{{order.create_time_text}}</text>
			</view>

		</view>
		<view class="flex flexC flexJC fixed bgff py10 pl12 shadow">
			<text v-if="item.status == 'payed'"   class="bgff0 r40 px12 py4">接单</text>
			<text v-if="item.status == 'payed'"    class="bgff0 r40 px12 py4">派单(暂时不去)</text>
			<text v-if="item.status == 'taked'"  class="bgff0 r40 px12 py4">开始</text>
			<text  v-if="item.status == 'doing'"  class="bgff0 r40 px12 py4">完成</text>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo: '',

				order: null
			};
		},
		onLoad(option) {

			this.orderNo = option.order_no;
			console.info(this.orderNo);
			this.getDetail();
		},

		onShow() {

		},
		methods: {
			
			
			update(item) {
				this.currentOrderItem = item;
				var status = "payed";
				if(item.status == 'payed'){
					status = "taked";
				} else if(item.status == 'taked'){
					status = "doing";
				}else if(item.status == 'doing'){
					status = 'done'
				}
				let param = {
					status: status,
					order_no:item.order_no
				};
				let that = this;
				this.$api.updateStatus(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						
						this.isnodata = false;
						this.isLastPage = false;
						this.page = 1;
						this.list = [];
						this.getList();
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			
			},



			copyOrder() {
				uni.setClipboardData({
					data: this.orderNo,
					success: () => {
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
				})
			},




			getDetail() {
				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.assistantOrderDetail(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.order = res.data;

					} else {

					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.location {
			width: 80upx;
		}

		.white {
			color: #FFF;
		}

		.bgef {
			background-color: #EFEFEF;
		}

		.logo {
			width: 168upx;
			height: 168upx;
		}

		.ellipsis1 {
			width: 400upx;
		}

		.avatar {
			width: 38upx;
			height: 38upx;
		}

		.bgd0 {
			background-color: #D0D0D0;
		}

		.btn {
			width: 236upx;
			height: 72upx;
			line-height: 72upx;
		}

		.head {
			background: linear-gradient(to bottom, #F5C51D, #F5C51D, #F5C51D);
			color: #533F26;
		}

		.mt-20 {
			position: relative;
			margin-top: -50rpx;
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
		}

		.mb48 {
			margin-bottom: 126rpx;
			padding-bottom: 120rpx;
		}
	}
</style>